<template>
  <view class="container">
    <!-- 头部背景 -->
    <view class="header-bg">
      <view class="header-content">
        <view class="user-info">
          <text class="welcome-text" v-if="hasLogin">Hi，{{ userInfo.nickName || userInfo.userName || '用户' }}</text>
          <text class="welcome-text" v-else>Hi，请登录</text>
          <text class="greeting-text">{{ greetingText }}</text>
        </view>
      </view>
      
      <!-- 卡片区域 -->
      <view class="cards-container">
        <view class="card-item card-left" @click="goToFavorite()">
          <view class="card-icon">
                <img :src="'https://youke1.picui.cn/s1/2025/09/18/68cbfeee81280.png'" mode=""></img>
          </view>
          <view class="card-info">
            <text class="card-number">{{ favoriteCount }}</text>
            <text class="card-label">我的收藏</text>
          </view>
        </view>
        
        <view class="card-item card-right"  @click="goToMastered()">
          <view class="card-icon">
            <img :src="'https://youke1.picui.cn/s1/2025/09/18/68cbfeed35e7c.png'" mode=""></img>
          </view>
          <view class="card-info">
            <text class="card-number">{{ masteredCount }}</text>
            <text class="card-label">已掌握</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 签到区域 -->
    <view class="checkin-section">
      <view class="checkin-content">
        <view class="checkin-text">
          <text class="checkin-title">答岸</text>
          <text class="checkin-subtitle">答岸在手，面试无忧！</text>
        </view>
        <view class="checkin-button" @click="handleCheckin">
          <text class="checkin-btn-text">立即刷题</text>
        </view>
      </view>
    </view>

    <!-- 类目推荐 -->
    <view class="section-title category-more">
      <text class="section-text">类目</text>
      <text class="section-more-text" @click="toAllCategories" >更多</text>
    </view>

    <view class="category-container">
      <view class="category-item" v-for="(item, index) in categories" 
        :key="index" @click="goToCategory(item)">
        <view class="category-icon-wrapper">
          <view class="category-circle">
            <image class="icon-image"  referrerPolicy="no-referrer" :src="item.icon" mode="widthFix"></image>
          </view>
        </view>
        <text class="category-name">{{ item.name }}</text>
      </view>
    </view>
    
    <!-- 热门推荐 -->
    <view class="section-title hot-section">
      <text class="section-text">热门推荐</text>
    </view>
    
    <view class="hot-question-list">
      <view class="question-item" v-for="(question, index) in hotQuestions" 
        :key="index" @click="goToQuestion(question)">
        <view class="question-title">
          <span>{{ question.title }}</span>
        </view>
        <view class="question-meta">
          <difficulty-tag :difficulty="question.difficulty" />
        </view>
      </view>
    </view>
  </view>
  
</template>

<script>
import config from '@/common/config.js';
import DifficultyTag from '@/components/difficulty-tag.vue';

export default {
  components: {
    DifficultyTag
  },
	data() {
      return {
        currentPage: 'home', // 当前页面标识
        categories: [],
        hotQuestions: [],
        userInfo: {}, // 用户信息
        hasLogin: false, // 是否已登录
        greetingText: '', // 问候语
        favoriteCount: 0, // 收藏数量
        masteredCount: 0 // 已掌握面试题数量
				}
			},
		onLoad() {
      // 页面加载时获取分类数据
      this.loadCategories();
      // 页面加载时获取热门推荐数据
      this.loadHotQuestions();
      // 设置问候语
      this.greetingText = this.getTimeGreeting();
		},
    onShow() {
      // 页面显示时重新获取用户状态和相关数据
      // 避免重复调用，只在需要时更新用户相关信息
      this.checkLoginStatus();
    },
		methods: {
      // 检查用户登录状态
      checkLoginStatus() {
        try {
          const userInfo = uni.getStorageSync('userInfo');
          const token = uni.getStorageSync('token');
          
          if (userInfo && token) {
            this.userInfo = userInfo;
            this.hasLogin = true;
            // 只有在登录状态下才获取相关数据
            this.getFavoriteCount();
            this.getMasteredCount();
          } else {
            this.hasLogin = false;
            this.favoriteCount = 0;
            this.masteredCount = 0;
          }
        } catch (e) {
          console.error('获取用户登录状态失败:', e);
          this.hasLogin = false;
        }
      },
      
      // 获取当前时间段的问候语
      getTimeGreeting() {
        const hour = new Date().getHours();
        if (hour >= 5 && hour < 9) {
          return '早上好！';
        } else if (hour >= 9 && hour < 12) {
          return '上午好！';
        } else if (hour >= 12 && hour < 14) {
          return '中午好！';
        } else if (hour >= 14 && hour < 18) {
          return '下午好！';
        } else if (hour >= 18 && hour < 22) {
          return '晚上好！';
        } else {
          return '夜深了，注意休息！';
        }
      },
      
      // 获取收藏数量
      getFavoriteCount() {
        // 只有在登录状态下才获取收藏数量
        if (!this.hasLogin) {
          this.favoriteCount = 0;
          return;
        }
        
        this.$request('/interview/favorite/list', 'GET')
          .then(res => {
            if (res.code === 200) {
              this.favoriteCount = res.rows ? res.rows.length : 0;
            } else {
              this.favoriteCount = 0;
            }
          }).catch(err => {
            console.error('获取收藏列表异常:', err);
            this.favoriteCount = 0;
          });
      },
      
      // 获取已掌握面试题数量
      getMasteredCount() {
        // 只有在登录状态下才获取已掌握面试题数量
        if (!this.hasLogin) {
          this.masteredCount = 0;
          return;
        }
        
        this.$request('/interview/mastered/list', 'GET')
          .then(res => {
            if (res.code === 200) {
              this.masteredCount = res.rows ? res.rows.length : 0;
            } else {
              this.masteredCount = 0;
            }
          }).catch(err => {
            console.error('获取已掌握面试题列表异常:', err);
            this.masteredCount = 0;
          });
      },

      // 获取当前时间段的问候语
      loadCategories() {
        // 获取分类数据
        this.$request('/interview/category/list?parentId=0', 'GET')
          .then(res => {
            if (res.code === 200) {
              this.categories = res.rows.map(item => {
                return {
                  id: item.categoryId,
                  name: item.categoryName,
                  icon: item.icon // 默认图标
                }
              }).slice(0, 4) // 只取前4个分类
            }
          }).catch(err => {
            console.error('获取分类列表异常:', err)
          })
      },
      
      loadHotQuestions() {
        // 获取热门推荐数据
        this.$request('/interview/question/list?isHot=1', 'GET')
          .then(res => {
            if (res.code === 200) {
              this.hotQuestions = res.rows.map(item => {
                // 根据难度字段设置颜色类
                let difficultyClass = '';
                if (item.difficulty === '简单') {
                  difficultyClass = 'difficulty-easy';
                } else if (item.difficulty === '中等') {
                  difficultyClass = 'difficulty-medium';
                } else if (item.difficulty === '困难') {
                  difficultyClass = 'difficulty-hard';
                }

                return {
                  id: item.questionId,
                  title: item.content,
                  stats: item.answerCount ? item.answerCount + ' 人已解答' : '暂无解答',
                  difficulty: item.difficulty,
                  difficultyClass: difficultyClass
                }
              }) // 只取前4个热门问题
            }
          }).catch(err => {
            console.error('获取热门推荐异常:', err);
          });
      },


      // 处理底部导航栏页面切换
      handlePageChange(page) {
        this.currentPage = page;
        // 这里可以根据page参数做页面跳转等操作
      },
      
      goToCategory(item) {
        console.log('跳转到分类:', item)
        uni.navigateTo({
          url: `/pages/question/index?parentId=${item.id}`
        })
        // 跳转到分类页面
      },
      goToFavorite() {
        uni.navigateTo({
          url: `/pages/favorite/index`
        })
        // 跳转到分类页面
      },

      goToMastered(){
        uni.navigateTo({
          url: `/pages/mastered/index`
        })

      },
      toAllCategories() {
        uni.navigateTo({
          url: "/pages/category/index"
        })
      },

      goToQuestion(question) {
        console.log('跳转到题目:', question)
        // 跳转到详情页
        uni.navigateTo({
          url: `/pages/hot/detail?questionId=${encodeURIComponent(question.id)}`
        });
      }
    }
}
</script>

<style scoped>
.container {
  padding-bottom: 60px;
  background-color: #f9fafb;
  min-height: 100vh;
  background: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBmaWxsPSJub25lIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIxMjY3IiBoZWlnaHQ9IjkxOSIgdmlld0JveD0iMCAwIDEyNjcgOTE5Ij48ZGVmcz48bGluZWFyR3JhZGllbnQgeDE9IjAuODUxMjA2NDgxNDU2NzU2NiIgeTE9IjAuOTI1NjAzMTUxMzIxNDExMSIgeDI9IjAuMzA2NjA3NDUxMjE3NTkwMzciIHkyPSIwLjc1NjY1OTIyODgyNTk1NjUiIGlkPSJtYXN0ZXJfc3ZnMF85XzAzNyI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI0Y0RjVGQSIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjRjRGNUZBIiBzdG9wLW9wYWNpdHk9IjAiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCB4MT0iMC44NTEyMDY0ODE0NTY3NTY2IiB5MT0iMC45MjU2MDMxNTEzMjE0MTExIiB4Mj0iLTEuMTg1MDY5MzcxNTY2MDg1OGUtOCIgeTI9IjAuMzYzMjA3NTE5MDU0NDEyOCIgaWQ9Im1hc3Rlcl9zdmcxXzlfMDQwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRjRGNUZBIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNGNEY1RkEiIHN0b3Atb3BhY2l0eT0iMC4zNjAwMDAwMTQzMDUxMTQ3NSIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IHgxPSIwLjg1MTIwNjQ4MTQ1Njc1NjYiIHkxPSIwLjkyNTYwMzE1MTMyMTQxMTEiIHgyPSItMS4xODUwNjkzNzY2NzIzNDE3ZS04IiB5Mj0iMC4zNjMyMDc1MTkwNTQ0MTI4NCIgaWQ9Im1hc3Rlcl9zdmcyXzlfMDMzIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRTdFOUY0IiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNGNEY1RkEiIHN0b3Atb3BhY2l0eT0iMC4zNjAwMDAwMTQzMDUxMTQ3NSIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IHgxPSIwLjg1MTIwNjQ4MTQ1Njc1NjYiIHkxPSIwLjkyNTYwMzE1MTMyMTQxMTEiIHgyPSItMS4xODUwNjkzNzY2NzIzNDE1ZS04IiB5Mj0iMC4zNjMyMDc1MTkwNTQ0MTI4NCIgaWQ9Im1hc3Rlcl9zdmczXzlfMDMzIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRTdFOUY0IiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNGNEY1RkEiIHN0b3Atb3BhY2l0eT0iMC4zNjAwMDAwMTQzMDUxMTQ3NSIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IHgxPSIwLjg1MTIwNjQ4MTQ1Njc1NjYiIHkxPSIwLjkyNTYwMzE1MTMyMTQxMTEiIHgyPSItMS4xODUwNjkzNzY2NzIzNDE1ZS04IiB5Mj0iMC4zNjMyMDc1MTkwNTQ0MTI4NCIgaWQ9Im1hc3Rlcl9zdmc0XzlfMDMzIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRTdFOUY0IiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNGNEY1RkEiIHN0b3Atb3BhY2l0eT0iMC4zNjAwMDAwMTQzMDUxMTQ3NSIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IHgxPSIwLjg1MTIwNjQ4MTQ1Njc1NjYiIHkxPSIwLjkyNTYwMzE1MTMyMTQxMTEiIHgyPSItMS4xODUwNjkzNzY2NzIzNDE3ZS04IiB5Mj0iMC4zNjMyMDc1MTkwNTQ0MTI4NCIgaWQ9Im1hc3Rlcl9zdmc1XzlfMDMzIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRTdFOUY0IiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNGNEY1RkEiIHN0b3Atb3BhY2l0eT0iMC4zNjAwMDAwMTQzMDUxMTQ3NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxnPjxnPjxlbGxpcHNlIGN4PSI2MzMuNSIgY3k9IjQ1OS41IiByeD0iNjMzLjUiIHJ5PSI0NTkuNSIgZmlsbD0idXJsKCNtYXN0ZXJfc3ZnMF85XzAzNykiIGZpbGwtb3BhY2l0eT0iMSIvPjwvZz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwwLDE0MzApIj48ZWxsaXBzZSBjeD0iMzMzIiBjeT0iNzUwIiByeD0iMzUiIHJ5PSIzNSIgZmlsbD0idXJsKCNtYXN0ZXJfc3ZnMV85XzA0MCkiIGZpbGwtb3BhY2l0eT0iMSIvPjwvZz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwwLDE3MTQpIj48ZWxsaXBzZSBjeD0iNjA4LjUiIGN5PSI4ODEuNSIgcng9IjI0LjUiIHJ5PSIyNC41IiBmaWxsPSJ1cmwoI21hc3Rlcl9zdmcyXzlfMDMzKSIgZmlsbC1vcGFjaXR5PSIxIi8+PC9nPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDAsMTc4MikiPjxlbGxpcHNlIGN4PSIxODUiIGN5PSI5MDgiIHJ4PSIxNyIgcnk9IjE3IiBmaWxsPSJ1cmwoI21hc3Rlcl9zdmczXzlfMDMzKSIgZmlsbC1vcGFjaXR5PSIxIi8+PC9nPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDAsMTU0NikiPjxlbGxpcHNlIGN4PSIxMDMzIiBjeT0iNzkwIiByeD0iMTciIHJ5PSIxNyIgZmlsbD0idXJsKCNtYXN0ZXJfc3ZnNF85XzAzMykiIGZpbGwtb3BhY2l0eT0iMSIvPjwvZz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwwLDEyOTApIj48ZWxsaXBzZSBjeD0iODgzLjUiIGN5PSI2NzkuNSIgcng9IjM0LjUiIHJ5PSIzNC41IiBmaWxsPSJ1cmwoI21hc3Rlcl9zdmc1XzlfMDMzKSIgZmlsbC1vcGFjaXR5PSIxIi8+PC9nPjwvZz48L3N2Zz4=");
  background-position-y: -260rpx;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #ffffff;
}

.category-more {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 头部背景 */
.header-bg {
  position: relative;
  padding: 100px 20px 20px;
  overflow: hidden;
}


.user-info {
  margin-bottom: 20px;
}

.welcome-text {
  font-size: 40rpx;
  font-weight: 500;
  color: #333333;
  display: block;
  margin-bottom: 20rpx;
}

.greeting-text {
  font-size: 30rpx;
  font-weight: 500;
  color: #a0a7ba;
}

/* 卡片区域 */
.cards-container {
  display: flex;
  gap: 40rpx;
  padding: 0 0rpx;
}

.card-item {
  flex: 1;
  height: 80rpx;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  padding: 40rpx;
  background-color: #fbfbfb;
}

.card-icon {
  margin-right: 20rpx;
}

.card-icon img {
  width: 80rpx;
  height: 80rpx;
  align-items: center;
  display: flex;
}

.card-info {
  display: flex;
  flex-direction: column;
  gap: 1rpx;
}

.card-number {
  font-size: 40rpx;
  font-weight: 500;
  color: var(--primary-dark-color);
}

.card-label {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
}

/* 签到区域 */
.checkin-section {
  margin: 20rpx 40rpx 0;
  height: 180rpx;
  border-radius: 40rpx;
  background: linear-gradient(101deg, #1c6cc6 0%, #10e4cf 97%);
  position: relative;
  overflow: hidden;
}

.checkin-section::before {
  content: "";
  position: absolute;
  top: 76rpx;
  left: 441rpx;
  width: 109rpx;
  height: 109rpx;
  background: linear-gradient(225deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(45deg);
}

.checkin-section::after {
  content: "";
  position: absolute;
  top: 93rpx;
  left: 499rpx;
  width: 85rpx;
  height: 85rpx;
  background: linear-gradient(225deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(45deg);
}

.checkin-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 46rpx;
}

.checkin-text {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.checkin-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #ffffff;
  text-transform: uppercase;
}

.checkin-subtitle {
  font-size: 25rpx;
  font-weight: 500;
  color: #ffffff;
  text-transform: uppercase;
}

.checkin-button {
  width: 160rpx;
  height: 60rpx;
  background-color: #ffffff;
  border-radius: 100rpx;
  display: none;
  align-items: center;
  justify-content: center;
}

.checkin-btn-text {
  font-size: 30rpx;
  font-weight: 500;
  color: #136bed;
  text-transform: uppercase;
}

/* 类目推荐 */
.section-title {
  padding: 40rpx 0 40rpx 40rpx;
}

.section-text {
  font-size: 35rpx;
  font-weight: 500;
  color: #000000;
}

.section-more-text{
  font-size: 25rpx;
  font-weight: 500;
  padding-right: 30px;
  color: #6a6a6a;
}

.category-container {
  display: flex;
  padding: 0 66rpx;
  gap: 30rpx;
  margin-bottom: 60rpx;
}

.category-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rpx;
}

.category-icon-wrapper {
  width: 120rpx;
  height: 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.category-circle {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
  text-align: center;
}

/* 热门推荐 */
.hot-section {
  margin-top: 60rpx;
}

.hot-question-list {
  padding: 0 30rpx;
  display: flex;
  flex-direction: column;
  gap: 18rpx;
}

.question-item {
  background: #fafafa;
  border-radius: 20px;
  padding: 16px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.question-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #000000;
}

.question-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.question-stats {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.stats-icon {
  width: 35rpx;
  height: 28rpx;
  position: relative;
}

.stats-icon::before,
.stats-icon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.stats-icon::before {
  width: 10rpx;
  height: 10rpx;
  background-color: #6b7280;
  top: 0;
  left: 0;
}

.stats-icon::after {
  width: 18rpx;
  height: 10rpx;
  border: 2rpx solid #6b7280;
  bottom: 0;
  right: 0;
}

.stats-text {
  font-size: 28rpx;
  color: #6b7280;
}

.question-difficulty {
  border-radius: 8rpx;
  padding: 8rpx 16rpx;
}

.difficulty-easy {
  background-color: #dcfce7;
}

.difficulty-medium {
  background-color: #fef3c7;
}

.difficulty-hard {
  background-color: #fee2e2;
}

.difficulty-text {
  font-size: 24rpx;
}

.difficulty-easy .difficulty-text {
  color: #16a34a;
}

.difficulty-medium .difficulty-text {
  color: #d97706;
}

.difficulty-hard .difficulty-text {
  color: #dc2626;
}
</style>
